<template>
    <div>
        <el-main class="agent-improve" v-loading="loading">
            <el-row v-if="active > 1">
                <el-steps
                    :active="active"
                    class="steps"
                    finish-status="success"
                    align-center
                    style="margin:20px 0">
                    <el-step
                        v-for="(item,index) in steps_text"
                        finish-status="success"
                        :title="item"
                        :key="index">
                    </el-step>
                </el-steps>
            </el-row>
            <div v-if="active == 1" class="step-container">
                <h1>完善资料</h1>
                <div class="form-wrap">
                    <el-form :model="form" ref="form" :rules="rules">
                        
                        <el-form-item
                            label="银行卡号"
                            prop="bank_card"
                        >
                            <el-input v-model="form.bank_card" placeholder="请输入银行卡号"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="开户支行"
                            prop="register_bank"
                        >
                            <el-input v-model="form.register_bank" placeholder="银行卡支行填写格式为“XX银行XX市XX支行”，例如“中国建设银行武汉金融港支行"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="支付宝账号"
                            prop="alipay_num"
                        >
                            <el-input v-model="form.alipay_num" placeholder="请输入支付宝账号"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="身份证号"
                            prop="id_card_number"
                        >
                            <el-input v-model="form.id_card_number" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="初始等级"
                            prop="level"
                        >
                            <el-radio-group v-model="form.level" @change='levelChange'>
                                <el-radio :label="1">菜鸟</el-radio>
                                <el-radio :label="2">新手</el-radio>
                                <el-radio :label="3">大神</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            label="身份证正面照片"
                            prop="id_card_pro"
                        >
                            <up-load @upChange="upChange" rule="id_card_pro"></up-load>
                        </el-form-item>
                        <el-form-item
                            label="身份证反面照片"
                            prop="id_card_con"
                        >
                            <up-load @upChange="upChange" rule="id_card_con"></up-load>
                        </el-form-item>
                        <el-form-item
                            label="代理师资格证照片"
                            prop="certificate"
                        >
                            <up-load @upChange="upChange" rule="certificate"></up-load>
                        </el-form-item>
                    </el-form>
                    <p class="agreement mt20 mb20">
                        <el-checkbox v-model="checked">
                            我已阅读并同意
                            <a href="javascript:;" @click="agreement">劳务合同协议书</a>
                        </el-checkbox>
                    </p>
                    <el-button @click="submit"  :disabled="!checked" type="primary" v-no-more-click:3000>提交</el-button>
                </div>
            </div>
            <div v-else-if="active == 2" class="step-container f20 bold tc">资料已上传成功，请您耐心等待审核员审核资料</div>
            <div v-else-if="active == 3" class="step-container f20 bold tc">恭喜您！审核通过，请<el-button type="text" @click="logout" class="logout" v-no-more-click:3000>重新登录</el-button>！</div>
        </el-main>
        <agreement ref='agreement'></agreement>
        <selectTeacher ref='selectTeacher' @determineTeacher="determineTeacher"/>
    </div>

</template>

<script>
import upLoad from '~/components/upLoad'
import { mapState } from 'vuex'
import { validateBank,validateId,validateAlipayNum } from '~/util/index'
import agreement from './components/agreement'
import selectTeacher from './components/selectTeacher'
import axios from "axios";
export default {
    components: {
        upLoad,
        agreement,
        selectTeacher
    },
    data() {
        return {
            loading: true,
            steps_text: ['账号注册', '资料上传成功', '审核成功'],
            active: 1,
            baseUrl: global.baseurl,
            fileList: [],
            form: {
                id_card_pro: '',
                id_card_con: '',
                certificate: '',
                bank_card: '',
                register_bank: '',
                id_card_number: '',
                alipay_num: '',
                level: 2,
                parent_id: null
            },
            rules: {
                bank_card: [{required: true, validator: validateBank, trigger: 'blur'}],
                register_bank: [{required: true, message: '请输入银行卡开户支行', trigger: 'blur'}],
                alipay_num: [{validator: validateAlipayNum, trigger: 'blur'}],
                id_card_number: [{required: true, validator: validateId, trigger: 'blur'}],
                id_card_pro: [{required: true, message: '请上传身份证正面照片', trigger: 'blur'}],
                id_card_con: [{required: true, message: '请上传身份证反面照片', trigger: 'blur'}]
            },
            checked: false
        }
    },

    computed: {
        ...mapState([
            'user'
        ])
    },

    mounted() {
        setTimeout(() => {
            this.loading = false
        }, 1000)
    },

    watch: {
        user: {
            handler: function(val) {
                if (val.status == '已上传资料') {
                    this.active = 2
                } else if (val.status == '已激活') {
                    this.active = 3
                }
            },
            immediate: true
        }
    },
    methods: {
        determineTeacher (id) {
            this.form.parent_id = id
        },
        levelChange (val) {
            if (val == 1) {
                this.$refs['selectTeacher'].show()
            }
        },
        logout() {
            let url = '/order/login'
            this.$store.commit("delToken");
            this.$cookies.remove("token");
            this.$store.commit("delUser");
            this.$cookies.remove("user");
            this.$router.push({
                path: url
            });
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {

                    let form = new FormData();
                    form.append('id_card_pro', this.form.id_card_pro);
                    form.append('id_card_con', this.form.id_card_con);
                    form.append('bank_card', this.form.bank_card);
                    form.append('register_bank', this.form.register_bank);
                    form.append('id_card_number', this.form.id_card_number);
                    if (this.form.certificate) {
                        form.append('certificate', this.form.certificate)
                    }
                    if (this.form.alipay_num) {
                        form.append('alipay_num', this.form.alipay_num)
                    }
                    if (this.form.parent_id) {
                        form.append('parent_id', this.form.parent_id)
                    }
                    axios({
                        method: "post",
                        url: this.baseUrl + `/api/agent/${this.user.id}/improve`,
                        data: form,
                        headers: {
                            "Content-Type": "multipart/form-data",
                            Authorization: "Bearer " + this.$store.state.token
                        }
                    }).then(res => {
                        if (res.data.code==200) {
                            this.$message({
                                type: 'success',
                                message: '资料上传成功，请耐心等待审核完成'
                            })
                            this.active = 2
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.message
                            })
                        }
                    }).catch(e => {
                    })

                }
            })
        },
        upChange(data) {
            if (data.fileList.length > 0) {
                this.form[data.rule] = data.fileList[0].raw
            } else {
                this.form[data.rule] = ''
            }
            this.$refs['form'].validateField(data.rule, valid => {
                if (valid) {
                    return false
                } else {
                    return false
                }
            })
        },
        agreement() {
            this.$refs['agreement'].show(this.form)
        }
    }
}
</script>

<style lang="less" scoped>
.agent-improve {
    position: relative;
    z-index: 9;
    .form-wrap {
        width: 500px;
    }
    /deep/.steps {
        .el-step__head.is-wait .el-step__icon.is-text .el-step__icon-inner {
            display: none;
        }
        .el-step__head.is-process {
            border-color:#C0C4CC;
            color: #C0C4CC;
            .el-step__icon-inner {
                display: none;
            }
        }
        .el-step__title.is-process {
            color: #C0C4CC;
        }
    }
    /deep/.el-button {
        &.logout {
            font-size: 20px;
            font-weight: bold;
        }
    }
}

</style>
